<template>
	<!-- 笔试辅导 -->
	<view>
		<!-- tab标签 -->
		<u-tabs :list="menu" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<!-- /tab标签 -->
		<view class="pl20 pr20">
			<!-- 每一项盒子 -->
			<u-empty text="列表为空" marginTop="100" v-if="!data.length"></u-empty>
			<view class="box-item flex pl30	pt30 pb34 mt28"
				@tap="$jump('/pages/home/Recruitment/infoDetail/infoDetail?id='+item.id+'&type='+type)"
				v-for="(item,index) in data" :key="index">
				<image :src="$baseUrl+item.image" class="w180 h180" mode="aspectFill"></image>
				<view class="box-item-r flex row-column row-between ml30">
					<view class="box-item-r-tit">{{item.title}}</view>
					<view class="x-fc color-999">
						<view class="h40 bg-eee pl10r pr10r bor-rad4r">{{menu[current].name}}</view>
					</view>
					<view class="">
						<text class="box-item-r-pic">￥{{item.price}}</text>
						<text class="box-item-r-oPic">￥{{item.price_end}}</text>
						<text class="box-item-r-num">已售{{item.sign_sold*1+item.fictitious_sold*1}}</text>
					</view>
				</view>
			</view>
			<!-- /每一项盒子 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menu: [],
				current: 0,
				type: '',
				data: '', //
				page: 1,
				data: []
			};
		},
		onNavigationBarButtonTap(e) {
			this.$jump('/pages/home/Recruitment/ExaminationGuidance/myOrder/myOrder?type=' + this.type)
		},
		onReachBottom() {
			this.page++
			this.writtenList()
		},
		onLoad(e) {
			if (e.tit) {
				uni.setNavigationBarTitle({
					title: e.tit
				})
			}
			if (e.type) {
				this.type = e.type
			}
			this.writtenCategoryList()
		},
		methods: {
			change(index) {
				this.current = index;
				this.writtenList()
			},
			writtenCategoryList() {
				let api = ''
				if (this.type == 1) {
					api = 'writtenCategoryList'
				} else if (this.type == 2) {
					api = 'interviewCategoryList'
				}
				this.$api[api]().then(res => {
					this.menu = res.data
					this.writtenList()
				})
			},
			writtenList() {
				let data = {
					category_id: this.menu[this.current].id,
					page: 1,
					size: this.page * 10
				}
				let api = ''
				if (this.type == 1) {
					api = 'writtenList'
				} else if (this.type == 2) {
					api = 'interviewList'
				}
				this.$api[api](data).then(res => {
					this.data = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.box-item {
		background-color: #FFFFFF;
		box-shadow: 0px 6rpx 20rpx 0px #E8EAEF;
		border-radius: 14rpx;

		.box-item-r {
			.box-item-r-tit {
				font-size: 30rpx;
				color: #0C162E;
			}

			.box-item-r-type {
				height: 40rpx;
				background: #F1F3F5;
				border-radius: 6rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #6D788B;
				text-align: center;
				line-height: 40rpx;
			}

			.box-item-r-pic {
				font-size: 34rpx;
				color: #FF286A;
			}

			.box-item-r-oPic {
				font-size: 22rpx;
				font-weight: 500;
				text-decoration: line-through;
				color: #6D788B;
			}

			.box-item-r-num {
				font-size: 22rpx;
				font-weight: 500;
				color: #6D788B;
			}
		}
	}
</style>
